<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#wzqdiv {
				text-align: center;
				margin-top: 30px;
			}
			
			#WZQ {
				background-image: url(wood.jpg);
			}
			
			.ok {
				cursor: pointer;
			}
			
			#white,
			#black {
				width: 100%;
				height: 100%;
				text-align: center;
				position: absolute;
				z-index: 10;
				background-color: rgba(0, 0, 0, 0.4);
				color: white;
				padding-top: 200px;
				font-size: 48px;
				display: none;
			}
			
			#white a,
			#black a {
				color: white;
				text-decoration: none;
				font-size: 48px;
			}
		</style>
	</head>

	<body>
		<a href="K3.媒体定义.html">K3媒体定义</a>

		<div id="white">
			<h1>白棋胜利</h1>
			<a href="index.html">再来一局</a>
		</div>
		<div id="black">
			<h1>黑棋胜利</h1>
			<a href="index.html">再来一局</a>
		</div>
		<div id="wzqdiv">
			<canvas id="WZQ" width="480" height="480"></canvas>
		</div>

		<script src="jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
				//棋子数据的数组：
				//白棋是1，黑棋是2
				var QiZiArr = [];
				var bcolor = true;
				for(var i = 0; i < 15; i++) {
					QiZiArr[i] = [];
					for(var k = 0; k < 15; k++) {
						QiZiArr[i][k] = 0;
					}
				}

				var WZQ = document.getElementById("WZQ");
				var pen = WZQ.getContext("2d");

				//画棋盘
				qipan();
				//画棋子
				drawQZ()

				//绘制棋盘函数
				function qipan() {
					//清屏
					pen.clearRect(0, 0, WZQ.width, WZQ.height)
					pen.beginPath();
					pen.rect(0, 0, WZQ.width, WZQ.height);
					pen.lineWidth = 3;
					pen.stroke();
					pen.lineWidth = 2;
					for(var i = 1; i <= 15; i++) {
						pen.beginPath();
						pen.moveTo(30, i * 30);
						pen.lineTo(WZQ.width - 30, i * 30);
						pen.stroke();

						pen.beginPath();
						pen.moveTo(i * 30, 30);
						pen.lineTo(i * 30, WZQ.height - 30);
						pen.stroke();
					}
				}
				//此处能点，此处不能点
				WZQ.onmousemove = function(event) {
					var ox = event.offsetX;
					var oy = event.offsetY;

					for(var i = 0; i < 15; i++) {
						for(var k = 0; k < 15; k++) {
							//每一个标准点
							var dx = i * 30 + 30;
							var dy = k * 30 + 30;

							var m = Math.abs(dx - ox);
							var n = Math.abs(dy - oy);
							var xb = Math.sqrt(m * m + n * n);
							if(xb < 15) {

								//判断现在存在的值是不是等于0，等于0才能画进去
								if(QiZiArr[i][k] == 0) {
									WZQ.className = "ok";
								} else {
									WZQ.removeAttribute("class");
								}
								break;
							}
						}
					}
				}
				//点击棋盘
				WZQ.onclick = function(event) {
					var ox = event.offsetX;
					var oy = event.offsetY;

					//判断鼠标对应的二维数组坐标
					for(var i = 0; i < 15; i++) {
						for(var k = 0; k < 15; k++) {
							//每一个标准点
							var dx = i * 30 + 30;
							var dy = k * 30 + 30;

							var m = Math.abs(dx - ox);
							var n = Math.abs(dy - oy);
							var xb = Math.sqrt(m * m + n * n);
							if(xb < 15) {

								//判断现在存在的值是不是等于0，等于0才能画进去
								if(QiZiArr[i][k] == 0) {
									QiZiArr[i][k] = bcolor ? 1 : 2;
									WZQ.removeAttribute("class");
									drawQZ();
									pd(i, k);
									console.log(i, k);
									bcolor = !bcolor;
								}
								break;
							}
						}
					}

					//每次点击棋盘之后，重新根据数组来绘出棋盘
					drawQZ()
				}

				//画棋子
				//1.什么颜色
				//2.坐标
				function drawQZ() {
					//首先要清空棋盘，才能重绘
					qipan();
					for(var i = 0; i < QiZiArr.length; i++) {
						for(var k = 0; k < QiZiArr[i].length; k++) {
							if(QiZiArr[i][k] == 1) {
								pen.beginPath();
								pen.arc(30 * i + 30, 30 * k + 30, 13, 0, 2 * Math.PI);
								pen.shadowColor = "gray"
								pen.shadowBlur = 20;
								pen.fillStyle = "white";
								pen.fill();
								pen.closePath();
							} else if(QiZiArr[i][k] == 2) {
								pen.beginPath();
								pen.arc(30 * i + 30, 30 * k + 30, 13, 0, 2 * Math.PI);
								pen.shadowColor = "gray"
								pen.shadowBlur = 20;
								pen.fillStyle = "white";
								var gz = WZQ.getContext("2d");
								var gz1 = gz.createRadialGradient(30 * i - 5 + 30, 30 * k - 5 + 30, 1, 30 * i - 5 + 30, 30 * k - 5 + 30, 10);
								gz1.addColorStop(0, "#FFFFFF");
								gz1.addColorStop(1, "#000000");
								pen.fillStyle = gz1;
								pen.fill();
								pen.closePath();
							}
						}
					}
				}

				//判断谁赢谁输
				function pd(x, y) {
					var tj = bcolor ? 1 : 2;
					var count = 0;

					//横向判断
					for(var i = 0; i < 15; i++) {
						if(QiZiArr[i][y] == tj) {
							count++;
						} else {
							count = 0;
						}
						if(count == 5) {
							if(bcolor == true) {
								$("#white").show();
							} else {
								$("#black").show();
							}
						}
					}

					//竖向判断
					for(var i = 0; i < 15; i++) {
						if(QiZiArr[x][i] == tj) {
							count++;
						} else {
							count = 0;
						}
						if(count == 5) {
							if(bcolor == true) {
								$("#white").show();
							} else {
								$("#black").show();

							}
						}
					}

					//45度方向
					//					if(x > y) {
					//						x - y;
					//					}

					for(var i = Math.abs(x - y), k = 0; i < 15; i++, k++) {

						if(x > y) {

							if(QiZiArr[i][k] == tj) {
								count++;
							} else {
								count = 0;
							}
						} else {

							if(QiZiArr[k][i] == tj) {
								count++;
							} else {
								count = 0;
							}
						}

						if(count == 5) {
							if(bcolor == true) {
								$("#white").show();
							} else {
								$("#black").show();

							}
						}

					}

					//135度方向
					if(x + y < 14) {
						for(var i = x + y, k = 0; i > 0; i--, k++) {
							if(QiZiArr[i][k] == tj) {
								count++;
							} else {
								count = 0;
							}

							console.log(count);
							if(count == 5) {
								if(bcolor == true) {
									$("#white").show();
								} else {
									$("#black").show();

								}
							}
						}
					}

					if(x + y > 14) {
						for(var i = 14, k = y - (14 - x); i > 0; i--, k++) {
							if(QiZiArr[i][k] == tj) {
								count++;
							} else {
								count = 0;
							}
							if(count == 5) {
								if(bcolor == true) {
									$("#white").show();
								} else {
									$("#black").show();

								}
							}
						}
					}

				}
			}
		</script>
	</body>

</html>